ページ移動の小技１ 戻る、進む、更新ボタン
ブラウザには「戻る」「進む」「更新」といったボタンが用意されていますが、これと同じ機能を持つボタンをホームページ内に作成することも可能です。
今回は、『ページ移動の小技１』ということで、戻る、進む、更新、トップページへ移動といった機能をもつボタンを作成する方法を紹介してみましょう。

→ 「進む」「戻る」ボタンを作成する
 
ページの移動を制御するにはJavaScriptを使用します。
ひとつ前に見たページを表示させる、いわゆる「戻る」の機能をもつJavaScriptは「history.back()」となります。
つまり、ページ内に作成したボタンにonClickイベントで「history.back()」を追加すれば「戻る」ボタンを作成できるわけです。
同様に、ひとつ後に見たページを表示させる「進む」ボタンは、JavaScriptの「history.forward()」をonClickイベントで追加することにより作成できます。
<INPUT type="button" value="戻る" onClick="history.back()">
<INPUT type="button" value="進む" onClick="history.forward()">


→ 「更新ボタン」を作成する
 
ページの再読み込みを行う「更新」ボタンも、「戻る」や「進む」ボタンと同様の手順で作成することができます。
現在表示されているページの再読み込みを実行するJavaScriptは「location.reload()」となりますので、これをonClickイベントとして追加してやれば「更新」ボタンを作成できます。
<INPUT type="button" value="戻る" onClick="history.back()">
<INPUT type="button" value="更新" onClick="location.reload()">
<INPUT type="button" value="進む" onClick="history.forward()">


→ 「トップページへ移動」ボタンを作成する
 
JavaScriptを使用すれば、ボタンをクリックするとあらかじめ指定しておいたページへ移動するボタンを作成することもできます。
移動先に自分のサイトのトップページなどを指定しておけば、訪問者の操作性を大きく向上できるようになるでしょう。
指定したURLへ移動させるJavaScriptは「location.href='（URL）'」となりますので、これをonClickイベントでボタンに追加すれば「トップページへ移動」ボタンを作成できます。
<INPUT type="button" value="戻る" onClick="history.back()">
<INPUT type="button" value="更新" onClick="location.reload()">
<INPUT type="button" value="進む" onClick="history.forward()">
<INPUT type="button" value="トップページへ移動" onClick="location.href='http://iswebmag.hp.infoseek.co.jp/'">
なお、「location.href='（URL）'」に記述するURLは自由に指定することができますので「トップページへ移動」ボタン以外の移動ボタンを作成することも可能です。
いろいろと工夫してみてください。

�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��